<script setup lang="ts">
import { FileUpload } from "@/components/common/FileUpload";
import Delete from "@iconify-icons/ep/delete";
import AddFill from "@iconify-icons/ep/plus";
import { ref, watch } from "vue";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: null,
    title: "新增",
    obtainRewardAchievementName: "",
    obtainRewardUnit: "",
    obtainRewardLevel: "",
    rewardName: "",
    rewardUnit: "",
    rewardLevel: "",
    rewardUnitList: [],
    winnerList: [],
    obtainDate: "",
    obtainRewardName: "",
    score: 0,
    additionalFile: ""
  }),
  userList: null
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

watch(
  () => newFormInline.value.winnerList,
  () => {
    let str = "";
    if (newFormInline.value.winnerList.length > 0) {
      str = newFormInline.value.winnerList
        .filter(v => v.winner)
        .map(v => v.winner)
        .join(",");
    }
    newFormInline.value.obtainRewardName = str;
  },
  { deep: true, immediate: true }
);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="160px"
    class="mr-12"
  >
    <el-form-item label="奖项名称" prop="obtainRewardAchievementName">
      <el-input
        v-model="newFormInline.obtainRewardAchievementName"
        placeholder="请输入"
        class="!w-[300px]"
      />
    </el-form-item>
    <el-form-item label="获奖级别" prop="rewardLevel">
      <el-select
        v-model="newFormInline.rewardLevel"
        placeholder="请选择"
        clearable
        class="!w-[300px]"
      >
        <el-option label="国家级" value="国家级" />
        <el-option label="省级" value="省级" />
        <el-option label="市厅级" value="市厅级" />
        <el-option label="其他" value="其他" />
      </el-select>
    </el-form-item>
    <el-form-item label="获奖人员" prop="obtainRewardName">
      <div class="!w-[300px]">
        <div
          v-for="(item, index) in newFormInline.winnerList"
          :key="index"
          class="flex items-center"
          :class="
            index == newFormInline.winnerList.length - 1 ? '' : 'mb-[15px]'
          "
        >
          <el-input
            v-model="item.winner"
            class="mr-[10px] flex-1"
            clearable
            placeholder="请输入"
          />
          <IconifyIconOffline
            v-if="index != 0"
            class="text-red-500 cursor-pointer mr-[8px]"
            :icon="Delete"
            @click="newFormInline.winnerList.splice(index, 1)"
          />
          <IconifyIconOffline
            class="cursor-pointer"
            :icon="AddFill"
            @click="newFormInline.winnerList.push({ winner: '' })"
          />
        </div>
      </div>
    </el-form-item>

    <el-form-item label="获奖单位" prop="obtainRewardUnit">
      <el-input
        v-model="newFormInline.obtainRewardUnit"
        placeholder="请输入"
        class="!w-[300px]"
      />
    </el-form-item>
    <el-form-item label="获奖等级" prop="obtainRewardLevel">
      <el-select
        v-model="newFormInline.obtainRewardLevel"
        placeholder="请选择"
        clearable
        class="!w-[300px]"
      >
        <el-option label="一等奖" value="一等奖" />
        <el-option label="二等奖" value="二等奖" />
        <el-option label="三等奖" value="三等奖" />
        <el-option label="其他" value="其他" />
      </el-select>
    </el-form-item>

    <el-form-item label="授奖单位" prop="rewardUnitList">
      <div class="!w-[300px]">
        <div
          v-for="(item, index) in newFormInline.rewardUnitList"
          :key="index"
          class="flex items-center"
          :class="
            index == newFormInline.rewardUnitList.length - 1 ? '' : 'mb-[15px]'
          "
        >
          <el-input
            v-model="item.rewardUnit"
            class="mr-[10px] flex-1"
            clearable
            placeholder="请输入"
          />
          <IconifyIconOffline
            v-if="index != 0"
            class="text-red-500 cursor-pointer mr-[8px]"
            :icon="Delete"
            @click="newFormInline.rewardUnitList.splice(index, 1)"
          />
          <IconifyIconOffline
            class="cursor-pointer"
            :icon="AddFill"
            @click="newFormInline.rewardUnitList.push({ rewardUnit: '' })"
          />
        </div>
      </div>
    </el-form-item>

    <el-form-item label="获奖日期" prop="obtainDate">
      <el-date-picker
        v-model="newFormInline.obtainDate"
        type="date"
        placeholder="请选择"
        value-format="YYYY-MM-DD"
        class="!w-[300px]"
      />
    </el-form-item>

    <el-form-item label="获取积分" prop="score">
      <el-input-number
        v-model="newFormInline.score"
        :min="0"
        placeholder="请输入"
        class="!w-[200px]"
      />
    </el-form-item>
    <el-form-item label="证书" prop="additionalFile">
      <FileUpload v-model="newFormInline.additionalFile" :limit="15" />
    </el-form-item>
  </el-form>
</template>
